/**
 * Created by Administrator on 2017/4/18.
 */
var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var postAjax = require('../tools/postAjax');
var ajax = require('../tools/ajax');
var ServerIP = require('../tools/ServerIP');
var Icon = require('../components/Icon');
var MsgBox = require('../components/MsgBox');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default", //Default/Blue
            LoginMobile:"",
            firstFlag:true,//第一次获取验证码
            flag:false,//倒计时判断
            loginFlag:false,//登录信息是否输入
            clickFlag:false,//验证码点击判断
            btnFlag:false,//按钮判断
            code:60,
        }
    },

    componentDidMount: function () {

    },
    componentWillUnmount:function(){
        if(this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    timer:null,

    action(e){
        var action = e.currentTarget.getAttribute("action");
        location.href = action;
    },
    //手机号登录
    login:function(e){
        var p =this;
        var LoginMobile = this.refs.LoginMobile.value;
        var VerificationCode = this.refs.VerificationCode.value;
        if(LoginMobile) {
            postAjax("POST", ServerIP.ip + "/kLoginController.do?login2", {
                phone: LoginMobile,
                code: VerificationCode,
            }, function (dt) {
                if (dt && dt.attributes.result == "true") {
                    localStorage.shopId = dt.attributes.shopid;
                    localStorage.setItem("userId", dt.attributes.userId);
                    location.href = "#wode";
                }else{
                    if(dt.msg){
                        p.refs.MsgBox.setState({
                            type: "no",
                            timeout:3000,
                            show:true,
                            word:dt.msg
                        });
                    }
                }
            })
        }
    },
    //获取验证码
    getCodeByPhone(){
        var LoginMobile = this.refs.LoginMobile.value;
        if(LoginMobile) {
            postAjax("POST", ServerIP.ip+"/kLoginController.do?verificationcode", {
                phone: LoginMobile
            }, function (dt) {
                console.log(dt);
            });
            this.setState({firstFlag: false});
            this.setState({flag: false});
            this.time();
        }
    },
    //文本框改变事件
    changed(){
        var LoginMobile = this.refs.LoginMobile.value;
        var VerificationCode = this.refs.VerificationCode.value;
        if(LoginMobile) {
            this.setState({loginFlag:true})
        }else{
            this.setState({loginFlag:false})
        }
        if(LoginMobile && VerificationCode){
            this.setState({btnFlag:true})
        }else{
            this.setState({btnFlag:false})
        }
    },
    //倒计时
    time(){
        var p=this;
        var code = this.state.code;
        console.log(code);
        if(code == 60){
            this.timer = setInterval(function(){
                code -=1;
                p.setState({code:code});
                p.setState({clickFlag:true});
                if(code == 0){
                    p.setState({
                        flag:true,
                        code:60,
                        clickFlag:false,
                    });
                    clearInterval(p.timer);
                }
            },1000)
        }
    },
    clear(){
        this.refs.LoginMobile.value = "";
        this.setState({loginFlag:false});
    },

    render: function () {
        var p = this;
        return (
            <div className="main"  id="main">
                <Bheader theme={this.state.theme} title="短信验证登录" headr="false" hact="#wode" wordBtn="注册"></Bheader>
                <div className="container-t">
                    <ul className="register">
                        <li>
                            <Icon className="loginIcon" icon="#icon-shouji" />
                            <input ref="LoginMobile" type="text" maxLength="11" placeholder="请输入您的手机号" onChange={p.changed} onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的手机号'" />
                            <div className="clear" onClick={p.clear} style={{display:p.state.loginFlag?"block":"none"}}>
                                <Icon icon="#icon-shanchu" style={{width:".8rem",height:".8rem"}} />
                            </div>
                            <div className="getCode" onClick={p.state.loginFlag?(p.state.clickFlag?"":p.getCodeByPhone):""} style={{color:p.state.loginFlag?"#333333":"#999999"}}>
                                {p.state.firstFlag?"获取验证码":""||p.state.flag?"重新获取":"重新获取("+p.state.code+")"}
                            </div>
                        </li>
                        <li>
                            <Icon className="loginIcon" icon="#icon-yanzhengma" />
                            <input ref="VerificationCode" type="text"  onChange={p.changed} placeholder="请输入短信中的验证码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入短信中的验证码'" />
                        </li>
                    </ul>
                    <div className={p.state.btnFlag?"registerBtn clicked":"registerBtn"} onClick={p.state.btnFlag?p.login:""}>
                        登录
                    </div>
                    <div className="accpass_login" onClick={p.action} action="#loginUserPassword">
                        <span>账号密码登录</span>
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});